<template>
	<view class="ys">

		<view class="screenbox">
			<view :class="screenId == item.id || item.check?'screenitem active':'screenitem'"
				v-for="(item,index) in screenList" @click="changeScreen(item)" :key="index">
				<text>{{item.text}}</text>
				<text class="icon_up" v-if="screenId == item.id"></text>
				<text class="icon_down" v-else></text>
			</view>
		</view>
		<view :class="screenId == 1?'screen_1 show_screen screen_main':'screen_1 screen_main'">
			<view class="bg">
				<view :class="screen_1_id == index?'item_1 active':'item_1'" v-for="(scr,index) in screen_1"
					:key="index" @click="changeItem1(index,scr)">
					{{scr}}
				</view>
			</view>
		</view>
		<view :class="screenId ==2?'screen_2 show_screen screen_main':'screen_2 screen_main'">
			<view class="bg">
				<view :class="scr2.check?'item_1 active':'item_1'" v-for="(scr2,index) in screen_2" :key="index"
					@click="changeItem2(scr2)">
					{{scr2.text}}
				</view>
			</view>
			<view class="screen_2_foot">
				<view class="left" @click="resetting">
					<i class="iconfont icon-guketiaochawenjuanbiao"></i>
					<text>重置</text>
				</view>
				<view class="right" @click="screen2Sure">
					<button>筛选</button>
				</view>
			</view>
		</view>
		<view :class="screenId ==3?'screen_3 show_screen screen_main':'screen_3 screen_main'">
			<view class="bg">
				<view :class="screen_3_id==scr3.id?'item_3 active':'item_3'" @click="changeItem3(scr3)"
					v-for="(scr3,index) in screen_3" :key="index">
					<text>{{scr3.text}}</text>
					<uni-icons v-show="screen_3_id==scr3.id" type="checkmarkempty" color="#3072F6"></uni-icons>
				</view>
			</view>
		</view>
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods,index) in list" :key="goods.id" @tap="toGoods(goods)">
					<image :src="goods.goods[0].goods_info.cover_path"></image>
					<view class="name">{{goods.goods[0].goods_name}}</view>
					<view class="info">
						<view class="price">￥{{goods.goods[0].total_price}}</view>
					</view>
					<view class="info">
						<view class="slogan">{{goods.goods[0].total_num}}个账号</view>
						<view class="buy" @click.stop="receiving(goods,index)">
							接单
						</view>
					</view>
				</view>
			</view>
			<view class="no-list" v-if="list.length==0">- 暂无数据 -</view>
		</view>
	</view>
</template>

<script>
	import {} from "@/api/api.js"
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				tasklist: [1, 2, 3, 4, 5],
				screenList: [{
						check: false,
						text: '价格',
						id: 2
					},
					{
						check: false,
						text: '排序',
						id: 3
					}
				],
				screenId: '',
				screen_2: [{
						check: true,
						text: '全部',
						id: 1
					},
					{
						check: false,
						text: '0-30万',
						id: 2
					},
					{
						check: false,
						text: '30-50万',
						id: 3
					},
					{
						check: false,
						text: '50-100万',
						id: 4
					},

				],
				screen_2_id: 0,
				screen_3: [{
						text: '默认选择',
						id: 1
					},
					{
						text: '金额从低到高',
						id: 2
					},
					{
						text: '金额从高到低',
						id: 3
					}
				],
				screen_3_id: 1,
				style1: '',
				is_screen: false
			}
		},
		onLoad() {

		},
		methods: {
			screen2Sure() { //合作金额进行筛选
				this.is_screen = false
				this.screenId = ''
				if (!this.screen_2[0].check) {
					this.screenList[1].check = true
				} else {
					this.screenList[1].check = false
				}
			},
			resetting() { //重置
				this.screen_2.forEach(item => {
					item.check = false
				})
				this.screen_2[0].check = true
			},
			changeItem3(item) { // 第三排序
				this.screen_3_id = item.id
				this.is_screen = false
				this.screenId = ''
				if (item.id != 1) {
					this.screenList[2].check = true
				} else {
					this.screenList[2].check = false
				}
			},
			changeItem2(scr) { //合作金额选择
				if (scr.id == 1) {
					this.screen_2.forEach(item => {
						item.check = false
					})
					scr.check = true
				} else {
					this.screen_2[0].check = false
					scr.check = !scr.check
				}

			},
			changeItem1(i, item) { //项目行业选择
				this.screen_1_id = i
				if (i != 0) {
					this.screenList[0].check = true
					this.screenList[0].text = item
				} else {
					this.screenList[0].check = false
					this.screenList[0].text = '区域'
				}
				this.is_screen = false
				this.screenId = ''
			},
			changeScreen(item) { //切换筛选分类
				if (this.screenId == item.id) {
					this.screenId = ''
					this.style1 = ''
					this.is_screen = false
				} else {
					this.is_screen = true
					this.screenId = item.id
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.goods-list {
		padding-top: 10px;

		.loading-text {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60upx;
			color: #979797;
			font-size: 24upx;
		}

		.product-list {
			width: 96%;
			padding: 0 2% 3vw 2%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.product {
				width: 49%;
				border-radius: 20upx;
				background-color: #fff;
				margin: 0 0 10px 0;
				padding-bottom: 10px;

				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
					height: 160px;
				}

				.name {
					width: 92%;
					padding: 10upx 4%;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					text-align: justify;
					overflow: hidden;
					font-size: 30upx;
					padding-bottom: 0;
					font-weight: bold;
				}

				.info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					width: 92%;
					padding: 0 4%;

					.price {
						color: #e65339;
						font-size: 32upx;
						font-weight: 600;
						margin-top: 10px;
					}

					.slogan {
						color: #777;
						font-size: 26upx;
					}

					.buy {
						background: #F05050;
						color: #fff;
						width: 40px;
						text-align: center;
						padding: 4px 2px;
						border-radius: 4px;
						font-size: 12px;
						font-weight: bold;
					}
				}
			}

		}
	}

	.top {
		height: 120px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 99;
		line-height: 120px;

		.left {
			position: absolute;
			left: 5%;
			top: 50%;
			transform: translate(0, -50%);
			height: 50px;
			display: flex;
			align-items: center;
			width: 100%;

			.inputbox {
				background: #f5f5f5;
				width: 70%;
				height: 35px;
				display: flex;
				align-items: center;
				border-radius: 20px;
				font-size: 14px;
				padding: 0 10px;

				text {
					margin-right: 10upx;
				}

				input {
					font-size: 15px;
					letter-spacing: 1px;
				}

				.input_place {
					color: #bbb;
				}
			}
		}
	}

	.place {
		height: 120px;
	}



	.tasklist {
		padding: 0 5%;
		position: relative;

		&::before {
			position: absolute;
			content: '';
			background: #00000000;
		}

		&.mc::before {
			position: absolute;
			content: '';
			background: #00000050;
			z-index: 9;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			transition: .5s;
		}

		.taskitem {
			padding: 10px 0;
			border-bottom: 1px solid #eee;

			&:last-child {
				border-bottom: 0;
			}

			.title {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
					width: 70%;

					.name {
						width: 70%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.tabs {
						font-size: 11px;
						color: #3072F6;
						background: #3072F622;
						padding: 1px 3px;
					}
				}

				.right {
					border: 1px solid #3072F6;
					color: #3072F6;
					border-radius: 20px;
					padding: 3px 8px;
					font-size: 14px;
					font-weight: bold;

					text {
						margin: 1px;
					}
				}
			}

			.describe {
				margin-top: 5px;
				font-size: 14px;
				color: #333;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.tips {
				font-size: 13px;
				color: #999;
				margin-top: 5px;
			}

			.imgbox {
				margin-top: 5px;

				image {
					border-radius: 3px;
				}
			}
		}
	}

	.screenbox {
		display: flex;
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		width: 100%;
		background: #fff;
		z-index: 99;
		height: 40px;


		.screenitem {
			flex: 1;
			text-align: center;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;


			&.active {
				color: #3072F6;
			}

			.icon_up::after {
				position: relative;
				content: '▲';
				color: #3072F6;
				font-size: 12px;
				vertical-align: top;
				display: block;
				transform: scale(0.8);
			}

			.icon_down::after {
				position: relative;
				content: '▼';
				font-size: 12px;
				display: block;
				transform: scale(0.8);
			}
		}
	}

	.bg {
		background: #fff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		padding: 10px 5%;
		display: flex;
		flex-wrap: wrap;

		.item_1 {
			background: #F4F5FA;
			width: 31.3333%;
			margin: 5px 1%;
			padding: 0 5px;
			box-sizing: border-box;
			font-size: 14px;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;

			&.active {
				color: #3072F6;
				background: #3072F625;
			}
		}
	}

	.screen_2 {

		.screen_2_foot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			margin-top: -2px;
			padding: 0 6%;
			border-bottom-right-radius: 8px;
			border-bottom-left-radius: 8px;
			padding-bottom: 5px;

			.left {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				font-size: 12px;

				i {
					font-size: 22px;
					margin-bottom: 3px;
				}
			}

			.right {
				width: 85%;

				button {
					width: 100%;
					background: #3072F6;
					color: #fff;
					font-size: 17px;
				}
			}
		}
	}

	.screen_main {
		width: 100%;
		position: fixed;
		top: 80px;
		z-index: -1;
		transform: translate(0, -100%);
		overflow: hidden;
		transition: .3s;

		&.screen_3 {
			.bg {
				flex-direction: column;

				.item_3 {
					height: 44px;
					line-height: 44px;
					font-size: 15px;
					display: flex;
					justify-content: space-between;

					&.active {
						color: #3072F6;
					}
				}
			}
		}
	}

	.show_screen {
		transform: translate(0);
		z-index: 99
	}
</style>